<div class="symbol-container">
    <div class="layerName">
        {{layerName}}
    </div>
    <div class="uniform-modify">
        <span>
            统一样式修改：
        </span>
        <div class="symbol-icon">
            <div>
                <img [src]="defaultSignSrcMap[layerType]" width="10px" height="10px" style=";cursor:pointer"
                     (click)="openSignSelector('all', $event)">
            </div>
        </div>
    </div>
    <div class="prop-modify">
        <div class="title">
            按照属性值修改样式
        </div>
        <div class="operation-wrapper">
            <div class="line props">
                <label>
                    <span>属性：</span>
                    <nz-select class="right" nzSize="small" [(ngModel)]="curProp" (ngModelChange)="getPropValList()"
                               style="width:150px">
                        <nz-option *ngFor="let prop of propList" [nzLabel]="prop"
                                   [nzValue]="prop"></nz-option>
                    </nz-select>
                </label>
            </div>
            <div class="values-display">
                <span class="title">
                    属性值展示框
                </span>
                <div class="values-list">
                    <nz-table [nzBordered]="true" nzSize="small"
                              [nzScroll]="{y:'300px'}"
                              [nzData]="propValList"
                              [nzShowPagination]="false"
                              [nzNoResult]="''">
                        <thead>
                        <tr>
                            <th nzWidth="20%">
                                符号
                            </th>
                            <th nzWidth="60%">
                                值
                            </th>
                            <th nzWidth="20%">
                                计数
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <ng-container *ngFor="let propVal of propValList">
                            <tr *ngIf="propVal.checked">
                                <td>
                                    <img [src]="defaultSignSrcMap[layerType]"
                                         (click)="openSignSelector('one',$event, propVal.value || 0)"
                                         style="width:10px; height:10px;cursor:pointer">
                                </td>
                                <td>{{propVal?.value}}</td>
                                <td>{{propVal?.count}}</td>
                            </tr>
                        </ng-container>
                        </tbody>
                    </nz-table>
                </div>
                <div class="values-operations">
                    <button nz-button nzSize="small" (click)="insertAllVals()">添加所有值</button>
                    <button nz-button nzSize="small" class="right" (click)="openInsertSome()">添加值</button>
                    <button nz-button nzSize="small" (click)="deleteAllVals()">全部移除</button>
                    <button nz-button nzSize="small" class="right" [disabled]="selectedVal"
                            (click)="deleteOneVals()">移除
                    </button>
                    <!--<div class="line">

                    </div>
                    <div class="line">

                    </div>-->
                </div>
            </div>
            <div class="operations">
                <button nz-button nzType="primary" (click)="setSignsByProp(hiddenSvgEmbed)">确定</button>
                <embed #hiddenSvgEmbed type="image/svg+xml" [src]="defaultSignPath" width="0" height="0"/>
            </div>
        </div>
    </div>
</div>

<kylin-sign-selector *ngIf="signSelVisible"
                     [layerType]="layerType"
                     [(isVisible)]="signSelVisible"
                     [selectCallBack]="selectDone"></kylin-sign-selector>
<nz-modal
    [(nzVisible)]="valFilterVisible"
    [nzTitle]="'添加值'"
    [nzContent]="modalContent"
    [nzFooter]="modalFooter"
    (nzOnCancel)="cancelInsertSome()"
    [nzMaskClosable]="false"
>
    <ng-template #modalContent>
        <div class="insert-some-container">
            <div class="title">
                选择需要添加的值
            </div>
            <div class="vals-selector">
                <div class="line" *ngFor="let val of propValListCopy">
                    <label nz-checkbox [(ngModel)]="val.checked">{{val.value}}</label>
                </div>
            </div>
        </div>
    </ng-template>

    <ng-template #modalFooter>
        <button nz-button nzType="default" (click)="cancelInsertSome()">取消</button>
        <button nz-button nzType="default" (click)="insertSomeVals()">确定</button>
    </ng-template>
</nz-modal>
<div>
    <kylin-charts [map]="map" [layerId]="layerId"></kylin-charts>
</div>
